<!DOCTYPE html>
<html>
<!--生命周期函数应用，加载动画-->

<head>
    <meta charset="UTF-8">
    <title>loading</title>
</head>

<body>
    <div id='app'>
        <demo></demo>
    </div>
    <script src="loading.js"></script>
    <!--某些情况下可能才能访问到-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const app = Vue.createApp({});
        app.component('demo', {
            data: function () {
                return {}
            },
            template: '<p>这是一个展示loading的demo</p>',
            beforeCreate() {
                Loading.show();
            },
            created() {
                // 模拟网络请求
                setTimeout(function () {
                    Loading.close();
                }, 1500);
            }
        });
        app.mount('#app');
    </script>
</body>

</html>